<!--created by Chuanpeng.zhu@dhc.com.cn-->
<ion-view view-title="文字图标">
  <ion-content>
    <div class="padding">
      <p class="indent">计算机中显示的图形一般可以分为两大类——矢量图和位图。
        <b>位图</b>是由一个一个的小色块组成，放大后会看到那些小色块，同一面积内小色块越多，分辨率就越高。
        <b>矢量图</b>是由计算机的算法产生的，可以<b>无限放大或缩小</b>，不会有任何损失。
      </p>

      <p class="indent">
        <a class="indent" ng-href="http://www.iconfont.cn">阿里巴巴矢量图库</a>给我们提供了矢量图的工具。
      </p>

      <div class="text-align-c border padding-10">
        <img ng-src="./img/user.png" style="width: 200px;height: 200px;" alt="用户"/>

        <div>用img标签加载图片，但是图片过大可能会失真。</div>
      </div>
      <div class="text-align-c border padding-10 margin-top-10">
        <div class="dhcfont color-text-red relative" style="font-size: 200px;height: 200px;top:80px;">&#xe634;</div>

        <div>用矢量图加载图片不会失真，并且可以设置颜色。</div>
        <code>加入样式class="dhcfont"，并且引入字体标记。</code>
      </div>
    </div>
  </ion-content>
</ion-view>
